<template>
  <m-modal
    :visible="visible"
    mask
    resizable
    :title="title"
    :showFooter="true"
    cancelText="取 消"
    okText="确 定"
    :width="292"
    :height="244"
    size="small"
    class="v-text-editor-modal"
    @ok="handleSave"
    @cancel="handleCancel"
  >
    <div style="width: 100%; height: 100%">
      <el-input
        v-model="inputvalue"
        type="textarea"
        class="_input"
      />
    </div>
  </m-modal>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";

import { usePortal } from "@/common/usePortal";
import { mixPopup } from "@/common/Portal";

defineOptions(
  mixPopup({
    name: "text-editor-modal"
  })
);
/**
 * 文本编辑小弹框
 */
const props = defineProps<{
  text: string;
  title: string;
  validText?: (text: string) => boolean;
}>();

const emit = defineEmits<{
  (event: "sure", data: any): void;
  (event: "close", data: any): void;
}>();

let inputvalue = ref<string>(props.text as string);

watch(
  () => props.text,
  newVal => {
    inputvalue.value = newVal as string;
  }
);

const { visible, handleOk, handleCancel } = usePortal(emit);
// const handelChange = async() => {
//   const dto = propertyUtil.getUpdatePropertyDtoByPropertyRow( props.row, app.activeProject!.id);
//   dto.value = inputvalue.value;
//   let res =  await modelService.updateModelProperty( dto);
//   if (res){
//     app.$bus.emit(BusEvent.REFRESH_POPERTY, props.row.modelId);
//   }
// };

const handleSave = async () => {
  if (props.validText) {
    const res = await props.validText(inputvalue.value);
    if (res) {
      handleOk(inputvalue.value);
    }
  } else {
    handleOk(inputvalue.value);
  }
};
</script>
<style lang="scss">
.v-text-editor-modal {
  ._input {
    width: 100%;
    height: 100%;
    .el-textarea__inner {
      height: 100%;
    }
  }
}
</style>
